<template>
  <el-dialog title="主题组件列表" width="75%" :close-on-click-modal="false" :visible.sync="visible">
    <div class="mod-config">
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
        </el-table-column>
        <el-table-column prop="name" header-align="center" align="center" label="组件名称">
        </el-table-column>
        <el-table-column prop="classifyName" header-align="center" align="center" label="组件分类">
        </el-table-column>
        <el-table-column prop="typeName" header-align="center" align="center" label="组件类型">
        </el-table-column>
        <el-table-column label="组件尺寸">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.widgetSize === 'small'">小号组件(small)</el-tag>
            <el-tag type="warning" v-else-if="scope.row.widgetSize === 'medium'">中号组件(medium)</el-tag>
            <el-tag type="danger" v-else-if="scope.row.widgetSize === 'larege'">大号组件(larege)</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="image" header-align="center" align="center" label="组件图">
          <template slot-scope="scope">
            <el-image style="width: 90px; height: 60px" :src="scope.row.image + '?x-oss-process=image/resize,h_100,w_100'"
              fit="contain" />
          </template>
        </el-table-column>
        <el-table-column prop="preview" header-align="center" align="center" label="预览图">
          <template slot-scope="scope">
            <el-image style="width: 90px; height: 60px" :src="scope.row.preview + '?x-oss-process=image/resize,h_100,w_100'
              " fit="contain" />
          </template>
        </el-table-column>
        <el-table-column width="80" label="是否免费">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.free === 1">免费</el-tag>
            <el-tag type="danger" v-else-if="scope.row.free === 2">VIP+广告</el-tag>
            <el-tag type="danger" v-else-if="scope.row.free === 3">仅Vip</el-tag>
            <el-tag type="danger" v-else-if="scope.row.free === 4">仅广告</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="80" label="是否热门">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.hot === 1">是</el-tag>
            <el-tag type="danger" v-else-if="scope.row.hot === 2">否</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="80" label="是否最新">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.newest === 1">是</el-tag>
            <el-tag type="danger" v-else-if="scope.row.newest === 2">否</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updated" header-align="center" align="center" label="更新时间">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="220" label="操作">
          <template slot-scope="scope">

            <template v-if="scope.row.showStatus == 1">
              <el-button type="text" size="small" @click="itemSoldShowOut(scope.row.id)">预览图隐藏</el-button>
            </template>
            <template v-if="scope.row.showStatus == 2">
              <el-button type="text" size="small" @click="itemPutaShowWay(scope.row.id)">预览图展示</el-button>
            </template>


            <template v-if="scope.row.status == 1">
              <el-button type="text" size="small" @click="itemSoldOut(scope.row.id)">下架</el-button>
            </template>
            <template v-if="scope.row.status == 2">
              <el-button type="text" size="small" @click="itemPutaWay(scope.row.id)">待上架</el-button>
            </template>
            <el-button type="text" size="small" @click="widgeConfigHandler(scope.row.id)">组件配置</el-button>
            <el-button type="text" size="small" @click="updateHandle(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update2 v-if="addOrUpdateVisible2" ref="addOrUpdate2" @refreshDataList="getDataList"></add-or-update2>
    </div>
  </el-dialog>
</template>

<script>
import AddOrUpdate from "./widge-add-or-update";
import AddOrUpdate2 from "./widge-add-or-update2";
export default {
  data () {
    return {
      visible: false,
      name: "",
      dataForm: {
        key: "",
        status: "",
        classifyId: ""
      },
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      addOrUpdateVisible2: false
    };
  },
  components: {
    AddOrUpdate,
    AddOrUpdate2
  },

  methods: {
    init (name) {
      this.visible = true;
      this.name = name;
      this.getDataList();
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/widge/widge/queryWidgeListByName"),
        method: "get",
        params: this.$http.adornParams({
          name: this.name
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.widgeList;
        } else {
          this.dataList = [];
        }
        this.dataListLoading = false;
      });
    },
    // 修改
    updateHandle (id) {
      let widge = null;
      this.dataList.forEach((item, index) => {
        if (item.id === id) {
          widge = item;
        }
      });
      //通用组件
      if (widge.themeId == null) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      } else {
        //主题组件
        this.addOrUpdateVisible2 = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate2.init(id);
        });
      }
    },
    widgeConfigHandler (id) {
      this.visible = false;
      this.$router.push({
        path: `widge-config`,
        query: {
          widgeId: id
        }
      });
    },
    // 下架
    itemSoldOut (id) {
      this.$confirm(`确定要对该组件进行下架操作操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/widge/widge/update"),
          method: "post",
          data: this.$http.adornData({
            id: id,
            status: 2
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 商品重新上架
    itemPutaWay (id) {
      this.$confirm(`确定要对该组件进行上架操作操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/widge/widge/update"),
          method: "post",
          data: this.$http.adornData({
            id: id,
            status: 1
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },

    // 下架
    itemSoldShowOut (id) {
      this.$confirm(`确定要对该组件进行隐藏操作操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/widge/widge/update"),
          method: "post",
          data: this.$http.adornData({
            id: id,
            showStatus: 2
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 商品重新上架
    itemPutaShowWay (id) {
      this.$confirm(`确定要对该组件进行展示操作操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/widge/widge/update"),
          method: "post",
          data: this.$http.adornData({
            id: id,
            showStatus: 1
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },

    // 删除
    deleteHandle (id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.id;
        });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/widge/widge/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
